<template>
	<view class="login">
		<view class="login-item">
			<!-- 图标部分 -->
			<uni-icons type="contact" size="130"></uni-icons>
			<view class="login-item-btn">
				<button open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button>
			</view>
			<text>登录享受更多权益</text>
		</view>
	</view>
</template>

<script>
	import { mapMutations,mapState } from 'vuex'
	export default {
		name:"my-login",
		    data() {
			return {
				
			};
		},
		methods: {
			...mapMutations('m_user',['addUserInfo','addToken','navRedirecInfo']),
			getUserInfo(e) {
				// console.log(e)
				this.addUserInfo(e.detail.userInfo)
				this.login(e.detail)
			},
			async login(info){
				const [err,res] = await uni.login().catch(err => err)
				if( err || res.errMsg !== "login:ok") return uni.showMsg('登录失败!')
				this.navigateBack()
				// console.log(res)
				// 准备参数对象
				const query = {
				  code: res.code,
				  encryptedData: info.encryptedData,
				  rawData: info.rawData,
				  iv: info.iv,
				  signature: info.signature
				}
				this.addToken(query.code)
				
			},
			navigateBack() {
				if( this.redirectInfo && this.redirectInfo.switchTab === 'switchTab'){
					uni.switchTab({
						url:this.redirectInfo.from,
						complete: () => {
							this.navRedirecInfo(null)
						}
					})
				}
			}
		},
		computed:{
			...mapState('m_user',['redirectInfo'])
		}
	}
</script>

<style lang="scss">
     .login{
		 margin-top:30% ;
		 width: 100%;
		 display: flex;
		 flex-direction: column;
		 align-items: center;
		 justify-content: center;
		 box-sizing: border-box;
		 .login-item{
			 .login-item-btn{
			 		button{
						width:360px;
						height: 40px;
						background-color: #c00000;
						color: white;
						margin: 5px;
						line-height: 40px;
						border-radius:17px;
					}	 
			 }
			 text{
				 margin-left: 30%;
				 color: darkgray;
				 font-size: 16px;
			 }
		 }
		
	 }
</style>